<template>
    <div class="container">
        <div class="title">{{ title }}</div>
        <img :src="successIcon" class="success_icon" alt=""/>
        <div class="success_text">{{ successText }}</div>
        <div class="detail_container">
            <div v-for="(item,index) in detailList" :key="index" class="detail_item">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                </div>
                <div class="right">
                    <div class="content">{{ item.content }}</div>
                    <img class="img_copy" v-if="item.copyable" src="@/image/homePage/aiImageDetail/cope.png" @click="copyText(item.content)"/>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
import { getHistoryDetail } from '@/request/personalCenter';
import { clipboard } from '@/utils';
    export default {
        name: "HistoryDetail",
        data() {
            return {
                detailId: '',
                title: '',
                successText: '',
                successIcon: null,
                
                detailList: [],
            }
        },
        computed: {

        },
        mounted() {
            // 生命周期钩子
            this.detailId = this.$route.params.id;
            this.title = this.$route.params.title;
            this.getHistoryDetail();
        },
        methods: {
            getHistoryDetail(){
                getHistoryDetail({ id: this.detailId }).then(res => {
                    if (res.code == 1) {
                        //实际上只有
                        if(res.data.status == 1){
                            this.refreshSuccessful(2);
                        }else if(res.data.status == 3){
                            this.refreshSuccessful(0);
                        }else{
                            this.refreshSuccessful(1);
                        }

                        this.dipositDetailListData(res.data);
                    }
                })
            },

            dipositDetailListData(data){
                let detailList = [];
                
                if(this.isDetailUnempty(data.order_sn)){
                    this.addDetailInfoToList(detailList, '订单号', data.order_sn, true);
                }
                if(this.isDetailUnempty(data.to_user_id)){
                    this.addDetailInfoToList(detailList, '转账到', data.to_user_id, true);
                }
                
                if(this.isDetailUnempty(data.currency)){
                    this.addDetailInfoToList(detailList, '金额', this.getMoneySignByType(data.money_type)+Number(data.money).toFixed(2)+' '+String(data.currency).toLocaleUpperCase());
                }
                if(this.isDetailUnempty(data.chain)){
                    this.addDetailInfoToList(detailList, '网络', data.chain,);
                }
                if(this.isDetailUnempty(data.fee)){
                    this.addDetailInfoToList(detailList, '手续费', Number(data.fee).toFixed(2)+' '+String(data.currency).toLocaleUpperCase(), true);
                }
                if(this.isDetailUnempty(data.address)){
                    this.addDetailInfoToList(detailList, '地址', data.address, true);
                }
                if(this.isDetailUnempty(data.hash)){
                    this.addDetailInfoToList(detailList, '哈希', data.hash, true);
                }
                if(this.isDetailUnempty(data.created)){
                    this.addDetailInfoToList(detailList, '时间', data.created);
                }

                this.detailList = detailList;
            },

            addDetailInfoToList(list, title, content, copyable = false) {
                let info = {};
                info.title = this.$t(title);
                info.content = content;
                info.copyable = copyable;
                list.push(info);
            },

            isDetailUnempty(value){
                return value != null && value != '' && value != undefined;
            },

            //获取金额正负
            getMoneySignByType(type) {
                if (type = 2) {
                    return '';
                } else {
                    return '-';
                }
            },

            // 方法
            refreshSuccessful(successful){
                if(successful == 1){
                    this.successText = this.$i18n.t('成功');
                    this.successIcon = require('@/image/personalCenter/successful.png');
                }else if(successful == 0){
                    this.successText = this.$i18n.t('失败');
                    this.successIcon = require('@/image/personalCenter/failed.png');
                }else{
                    this.successText = this.$i18n.t('处理中');
                    this.successIcon = require('@/image/personalCenter/processing.png');
                }
            },

            async copyText(value) {
			try {
				await clipboard.copy(value);
				this.$toast.success(this.$t('复制成功'));
			} catch(e) {
				this.$toast.fail(this.$t('复制失败'));
			}
		},
        },
        
    }

</script>

<style lang="less" scoped>
    @import './style.less';
</style>